<template>
    <div class="code">
        <form id="login-form">
            <dl class="list">
                <dd class="dd-padding">
                    <input id="mobile-number" class="input-weak" type="tel" placeholder="请输入您的验证码" name="mobile" autocomplete="off" v-model="code">
                </dd>
            </dl>

            <div class="btn-wrapper" @click="confirm">
                <button class="mint-button mint-button--default mint-button--large is-disabled getCode" type="button">
                    <label id="code">确认验证码</label>
                </button>
            </div>
        </form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                myCode: '',
                myMobile: '',
                code: ''
            }
        },
        created() {
            this.myCode = this.$route.query.code
            this.myMobile = this.$route.query.mobile
        },
        methods: {
            confirm() {
                if (this.myCode === this.code) {
                    // alert("验证码正确！")
                    this.$router.push(`/register/setpassword/?mobile=${this.myMobile}`)
                }
                else {
                    alert('验证码错误，请重新输入')
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .code {
        #login-form {
            .list {
                background-color: #fff;
                dd {
                    margin: 0;
                    overflow: hidden;
                    font-weight: 400;
                    position: relative;
                    border-bottom: 1px solid #d6d6d6;
                }
                .dd-padding {
                    padding: .28rem .2rem;
                    .crumbs {
                        list-style: none;
                        padding-left: 0;
                        text-align: center;
                        margin: 0;
                        li {
                            display: inline-block;
                            text-align: center;
                        }
                        li + li {
                            margin-left: .6rem;
                            position: relative;
                        }
                        li + li:before {
                            content: ">";
                            display: block;
                            position: absolute;
                            left: -.4rem;
                            font-weight: bolder;
                            color: #aaa;
                        }
                        .active {
                            color: #df2d2d;
                        }
                    }
                }
                .input-weak {
                    border: 0;
                    height: .6rem;
                    margin: -.15rem 0;
                    text-indent: .1rem;
                    line-height: 1;
                    font-size: .3rem;
                    border-radius: .06rem;
                    padding: 0;
                    width: 100%;
                    outline: none;
                }
                .input-weak:focus {
                    background-color: #f8f8f8;
                }
            }
            .btn-wrapper {
                width: 100%;
                margin-top: 0.28rem;
                .getCode {
                    background-color: #dcdcdc;
                }
            }
        }
    }
</style>